<!DOCTYPE html>
<html>
<head>
    <title>Relativity Frames Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="relativityCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('relativityCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper function to draw an arrow (line + arrowhead) ---
        function drawArrow(ctx, fromX, fromY, toX, toY) {
            const headLength = 10;
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);

            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // --- Drawing parameters ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        const fontVar = 'italic 24px Times New Roman';
        const fontLabel = '24px Times New Roman';
        const fontChinese = '24px KaiTi'; // A common font for Chinese characters

        // --- Define origins ---
        const O = { x: 80, y: 380 };
        const O_prime = { x: 180, y: 380 };
        const O_double_prime = { x: 180, y: 230 };

        // --- Draw Frame S (S系) ---
        // y-axis
        drawArrow(ctx, O.x, O.y, O.x, 180);
        // x-axis (part of the longer horizontal line)
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(O_prime.x, O_prime.y);
        ctx.stroke();
        
        ctx.font = fontLabel;
        ctx.fillText('O', O.x - 25, O.y + 10);
        ctx.font = fontVar;
        ctx.fillText('y', O.x - 25, 180);
        ctx.font = fontChinese;
        ctx.fillText('S系', O.x + 10, O.y - 40);


        // --- Draw Frame S' (S'系) ---
        // x'-axis
        drawArrow(ctx, O_prime.x, O_prime.y, 480, O_prime.y);
        // y'-axis (part of the longer vertical line)
        ctx.beginPath();
        ctx.moveTo(O_prime.x, O_prime.y);
        ctx.lineTo(O_double_prime.x, O_double_prime.y);
        ctx.stroke();

        ctx.font = fontLabel;
        ctx.fillText("O'", O_prime.x - 25, O_prime.y + 10);
        ctx.font = fontVar;
        ctx.fillText("x'", 485, O_prime.y + 8);
        ctx.fillText("y'", O_prime.x - 25, 280);
        ctx.font = fontChinese;
        ctx.fillText("S'系", O_double_prime.x + 40, O_prime.y - 50);

        // --- Draw Frame S'' (S''系) ---
        // x''-axis
        drawArrow(ctx, O_double_prime.x, O_double_prime.y, 480, O_double_prime.y);
        // y''-axis
        drawArrow(ctx, O_double_prime.x, O_double_prime.y, O_double_prime.x, 50);
        
        ctx.font = fontLabel;
        ctx.fillText("O''", O_double_prime.x - 35, O_double_prime.y + 10);
        ctx.font = fontVar;
        ctx.fillText("x''", 485, O_double_prime.y + 8);
        ctx.fillText("y''", O_double_prime.x - 25, 50);
        ctx.font = fontChinese;
        ctx.fillText("S''系", O_double_prime.x + 40, O_double_prime.y - 20);

        // --- Draw Velocity Vectors ---
        // Horizontal velocity v
        drawArrow(ctx, 300, O_prime.y - 20, 360, O_prime.y - 20);
        ctx.font = fontVar;
        ctx.fillText('v', 370, O_prime.y - 15);
        
        // Vertical velocity v
        drawArrow(ctx, O_double_prime.x + 30, 150, O_double_prime.x + 30, 100);
        ctx.font = fontVar;
        ctx.fillText('v', O_double_prime.x + 40, 125);
        
        // --- Add arrowheads to show collinear axes from the image ---
        // Additional arrowhead on x-axis line for 'x'
        drawArrow(ctx, O.x, O.y, 280, O.y);
        ctx.font = fontVar;
        ctx.fillText('x', 285, O.y + 8);

        // Additional arrowhead on y-axis line for 'y''
        const y_prime_arrow_y = (O_prime.y + O_double_prime.y) / 2 + 30;
        drawArrow(ctx, O_prime.x, O_prime.y, O_prime.x, y_prime_arrow_y);

    </script>
</body>
</html>